<template>
  <view class="content"  :class="{'stopScroll':isStopScroll}">
    <scroll-view class="scroll-view"
                 refresher-default-style="none"
                 :scroll-y="true"
                 :scroll-with-animation="true"
                 :scroll-top="0">
      <!-- 固定导航栏 -->
      <view class="fixed-nav-bar"
            :style="{ 'background': backgroundColor ,'box-shadow': scHeight<380?'':'0 0 6px rgba(0,0,0,0.1)'}">
        <!-- 状态栏高度 -->
        <!--<view @click="goTop" class="status-bar" :style="{'height': statusBarHeight + 'px;width:100%;position:fixed;top:0;z-index:10;'}"></view>
        <view @click="goTop" class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>-->
        <u-navbar :is-back="false" title=" " background="transparent" :border-bottom="false">
          <!--顶部tab{'width': 'calc(100% - ' + menuWidth + 'px)'}-->
          <view  @click="goTop" class="header_box" style="width: 100%">
            <view :class="header_index===1 ? 'header_list header_list_active' : 'header_list'" :key="header_index" @click="clickMenu(1)">
              探店
              <text v-if="header_index===1" class="active_line"></text>
            </view>
            <view :class="header_index===2 ? 'header_list header_list_active' : 'header_list'" :key="header_index" @click="clickMenu(2)">
              <text style="position: relative;">外卖返现</text>
              <view style="display: flex;position: relative;padding-left: 6rpx;">
                <text class="iconfont sanJiaoXing"></text>
                <text class="iconfont icon-arrow-right">试吃官</text>
              </view>
              <text v-if="header_index===2" class="active_line" style="width: 60%"></text>
            </view>
          </view>
        </u-navbar>

        <!-- 探店-导航栏内容容器 -->
        <view v-if="header_index===1" class="address-container" style="position: relative;display: flex;flex-direction: column;width: 750rpx;">
          <view  v-if="scHeight > 0.1" class="address-box">
            <!-- 导航栏 - 搜索框 -->
            <view class="search-container" @click="Tosearch()" >
              <view class="search-button">搜 索</view>
              <u-search placeholder="找寻好店，享好餐" disabled v-model="keyword" :show-action="false" bg-color="#FEFEFE"
                        search-icon-color="#AAAAAA"  height="72" ></u-search>
            </view>
            <!--附近店铺-->
            <view @click="ToShopGps()" class="search-shop-gps">
              <image :src="BannerImg + '/home/shop-gps-icon2.png'" style="width: 48rpx;height: 48rpx;"></image>
              <view class="search-shop-gps-text">地图选店</view>
            </view>
          </view>

          <!-- 导航栏 - 分类标签 -->
          <u-tabs  v-if="scHeight>380" :list="FenLeiList" :is-scroll="true" :current="current" @change="change"
                   active-color="#FFFFFF"
                   bg-color="transparent"
                   inactive-color="#FFFFFF" :active-item-style="{ color: '#FFFFFF','fontWeight':'normal',}"
                   font-size="24rpx" bar-height="10"></u-tabs>
          <!--        筛选点击后显示-->

          <view v-show="scHeight>380" class="add-word-head" >
            <add-word-head
                :pHeadVal="isHeadPopup"
                :selectObj="selectObj"
                :switchVal="isShowSwitch"
                :tabberHeight="tabberHeight"
                @selectFun="selectFun"
                @ClickFormVal="ClickFormVal"
                @submitData="submitData"
                @ClickWordHead="ClickWordHead"
                @clickOnly="clickOnly"></add-word-head>

          </view>

        </view>
        <!-- 官返-导航栏内容容器-->
        <view v-if="header_index===2" class="address-container" style="position: relative;display: flex;flex-direction: column;width: 750rpx;">
          <view  v-if="scHeight > 0.1" style="display: flex; padding: 10rpx;">
            <!-- 导航栏 - 地址选择 -->
            <view class="nav_bar u-flex" @click="Toaddres()" style="width: 55%;">
              <u-icon name="map" color="#333333" size="40"></u-icon>
              <view class="address ellipsis-one-line">{{ Address }}</view>
              <u-icon name="arrow-right" color="#333333" size="28"></u-icon>
            </view>
            <!-- 导航栏 - 搜索框 -->
            <view style="display: flex;width: 45%;">
              <view class="search-container" @click="ToGfsearch()" >
                <!--<view class="search-button">搜 索</view>-->
                <u-search placeholder="找寻好店，享好餐" disabled v-model="keyword" :show-action="false" bg-color="#FEFEFE"
                          search-icon-color="#AAAAAA" border-color="#FFA04D" ></u-search>
              </view>
              <view @click="goTop" style="flex: 1;"></view>
            </view>
          </view>
          <view v-if="scHeight > 420" class="takeOut_menu_float" >
            <WaimaiCashback :WaimaiCurrent="WaimaiCurrent" :scHeight="scHeight" @navbarChange="navbarChange" :scrollMenu="true"/>
          </view>
        </view>
      </view>

      <!-- 探店-主体内容区域 -->
      <view v-if="header_index===1" class="Top_box_wrap">
        <!-- 轮播图背景 -->
        <view class="lunbotu" :style="{ 'height': isChallengeOpen && isToken ? '866rpx' : '690rpx'}">
          <u-swiper :height="isChallengeOpen && isToken ? '800' : '610'" mode="none" name="bg" :autoplay="false" :list="SwpierList" border-radius="0"
                    @click="clickslide"></u-swiper>
        </view>
        <!--顶部-当前位置和搜索-->
        <view class="Top_box_content">
          <view class="navbar_height" :style="{'height': statusBarHeight + navFixedHeight + 'px' }"></view>
          <!--当前位置-->
          <view class="address-box add_box_content">
            <!-- 导航栏 - 地址选择 -->
            <view class="nav_bar u-flex" @click="Toaddres()" >
              <u-icon name="map" color="#FFFFFF" size="40"></u-icon>
              <view class="address ellipsis-one-line">{{ Address }}</view>
              <u-icon name="arrow-right" color="#FFFFFF" size="28"></u-icon>
            </view>
            <!--特效文字上下滚动-->
            <view @click="goTop" class="add-word" >
              <swiper class="swiper" circular next-margin="118rpx" vertical="true" previous-margin="20rpx" autoplay="true">
                <swiper-item v-for="(item,index) in addWord" :key="index">
                  <view class="swiper-item">
                    <image :src="item" mode="widthFix" style="border-radius: 30rpx;width: 100%"></image>
                  </view>
                </swiper-item>
              </swiper>
            </view>
            <!--附近店铺-->
            <view @click="ToShopGps()" class="search-shop-gps u-flex">
              <image :src="BannerImg + '/home/shop-gps-icon2.png'" style="width: 48rpx;height: 48rpx;"></image>
              <view class="search-shop-gps-text">地图选店</view>
            </view>
          </view>
          <!-- 导航栏 - 搜索框 -->
          <view class="search-container search_box_content" @click="Tosearch()" >
            <view class="search-button">搜 索</view>
            <u-search placeholder="找寻好店，享好餐" disabled v-model="keyword" :show-action="false" bg-color="#FEFEFE"
                      search-icon-color="#AAAAAA"  height="72" ></u-search>
          </view>
          <!--轮播图片-->
          <view class="banner_img" style="height: 330rpx">
            <swiper :autoplay="false" :circular="true" interval="3000" class="swiper" style="height: 330rpx">
              <!--第一个swiper-->
              <swiper-item>
                <!-- banner特效文字-->
                <view class="banner-word">
                  <!--视频-->
                  <view @click="goVideoPage" class="banner_mask">
                    <view class="banner_icon"><u-icon name="play-right-fill" color="#FFFFFF" size="32"></u-icon></view>
                  </view>
                  <!--<view class="e-c" style="left: 32rpx;top: 32rpx;">
                    <view class="e"></view>
                    <view class="e"></view>
                  </view>-->
                  <!--<view class="banner-word-eye">
                    <view class="eye-box"><text class="eye-text"></text></view>
                    <view class="eye-box"><text class="eye-text"></text></view>
                  </view>-->
                  <!--<view class="banner-word-box" style="margin-top: 30rpx"><image :src="BannerImg + '/home/banner_word01.png'" style="width: 510rpx;height: 68rpx"></image></view>
                  <view class="banner-word-box" style="margin-top: 20rpx;margin-left:30rpx;"><image :src="BannerImg + '/home/banner_word02.png'" style="width: 264rpx;height: 78rpx"></image></view>-->
                  <view class="banner-word-box" style="width: 100%;"><image :src="SwpierImg" mode="widthFix" style="width: 100%;"></image></view>
                </view>
                <!--挑战赛活动滚动 && isToken-->
                <view v-if="isChallengeOpen" class="challenge-box">
                  <td-challenge :challengeData="challengeData" @ShowSignUp="ShowSignUp"></td-challenge>
                </view>
                <view v-else class="challenge-box"><image :src="BannerImg + '/home/banner_challenge_img01.png'" style="width: 100%;height: 150rpx;"></image></view>
              </swiper-item>
              <!--第二个swiper-->
              <swiper-item>
                <view class="banner_swiper_content">
                  <view class="banner_swiper_bg"><image :src="BannerImg + '/home/banner_bg01.png'" mode="widthFix" style="width: 100%;height: 330rpx;"></image></view>
                  <view class="banner_swiper_warp">
                    <image :src="BannerImg + '/home/banner_img01.png'" mode="widthFix" style="width: 95%;"></image>
                    <view class="banner_swiper_title">邀10友30天各下2单:保底130元 + 挑战赛再奖128元！</view>
                    <view class="banner_swiper_foot">
                      <view class="banner_swiper_foot_text">
                        <view>现在进群：额外拿挑战赛 10% 奖励！ </view>
                        <view>发小红书邀人：每次完成挑战报销薯条推流！ </view>
                        <view style="display: flex;align-items: center"><text>速进群！官方帮扶手把手带飞～</text><image :src="BannerImg + '/home/banner_icon01.png'" style="width: 32rpx;height: 32rpx;"></image></view>
                      </view>
                      <view v-if="codeImg" class="banner_swiper_foot_qr"><image @click="clickImg(codeImg)" :src="codeImg" mode="widthFix" style="width: 100%;"></image></view>
                      <view v-else class="banner_swiper_foot_qr"><image @click="clickImg({qrImg:true})" :src="BannerImg + '/home/banner_qr.png'" mode="widthFix" style="width: 100%;"></image></view>
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>

          <!-- 首页菜单栏1-->
          <view class="home_menu_wrap">
            <home-nav-menus  :navList="navList" :current="current" @clickNavMenu="clickNavMenu"></home-nav-menus>
          </view>
        </view>
      </view>
      <!--官返-主体内容区域-->
      <view v-if="header_index===2" class="Top_box_wrap">
        <!--头部背景-->
        <view class="takeOut_head_bg"></view>
        <!--填补顶部空白内容-->
        <view :style="{'height': statusBarHeight + navFixedHeight + 'px'}"></view>
        <!--外卖轮播图-->
        <view class="takeOut">
          <view class="takeOut_content">
            <view class="takeOut_address_box">
              <!-- 导航栏 - 地址选择 -->
              <view class="nav_bar u-flex" @click="Toaddres()" style="width: 55%;">
                <u-icon name="map" color="#333333" size="40"></u-icon>
                <view class="address ellipsis-one-line">{{ Address }}</view>
                <u-icon name="arrow-right" color="#333333" size="28"></u-icon>
              </view>
              <!-- 导航栏 - 搜索框 -->
              <view class="search-container" @click="ToGfsearch()" >
                <!--<view class="search-button">搜 索</view>-->
                <u-search placeholder="找寻好店，享好餐" disabled v-model="keyword" :show-action="false" bg-color="#FEFEFE"
                          search-icon-color="#AAAAAA" border-color="#FFA04D" ></u-search>
              </view>
            </view>
            <!--官返-banner图片-->
            <view class="takeOut_banner">
              <view class="takeOut_banner_left">
                <image :src="BannerImg + 'home/takeout-banner01.png'" class="swiper_img1" ></image>
                <view class="swiper_text">0-5元吃外卖，审核通过秒返现到账</view>
              </view>
              <view class="takeOut_banner_right">
                <image :src="BannerImg + 'home/takeout-banner02.png'" class="swiper_img2" ></image>
              </view>
            </view>
            <!--下单必得返现-->
            <view class="Cashback">
              <view class="Cashback_content">
                <view class="swiper_wrap_title">
                  <image :src="BannerImg + 'home/Cashback.png'" class="swiper_wrap_title_img" ></image>
                  <view @click="openPopup()" class="swiper_wrap_title_text">下单前必看规则<u-icon name="arrow-right" color="#888888" size="24"></u-icon></view>
                </view>
                <!--步骤条-->
                <view class="step_wrap">
                  <view class="step_wrap_line"></view>
                  <view class="step_wrap_content">
                    <view class="step_wrap_content_item">
                      <view class="step_wrap_content_item_num">
                        <view class="step_wrap_content_item_num_round">
                          <view class="step_wrap_content_item_t"></view>
                        </view>
                      </view>
                      <view class="step_wrap_content_item_text">报名下单</view>
                    </view>
                    <view class="step_wrap_content_item">
                      <view class="step_wrap_content_item_num">2</view>
                      <view class="step_wrap_content_item_text">完成订单</view>
                    </view>
                    <!--<view class="step_wrap_content_item">
                      <view class="step_wrap_content_item_num">3</view>
                      <view class="step_wrap_content_item_text">等待24小时</view>
                    </view>-->
                    <view class="step_wrap_content_item">
                      <view class="step_wrap_content_item_num">3</view>
                      <view class="step_wrap_content_item_text">返现到账</view>
                    </view>
                  </view>
                </view>
                <!--下单内容-->
                <view class="swiper_order_wrap">
                  <view class="swiper_order_wrap_left">
                    <view class="order_qiangdan">
                      <view class="order_qiangdan_text">立即抢单</view>
                      <view class="order_remainder">剩余<text style="color:#FF530E;">66份</text></view>
                    </view>
                    <image :src="BannerImg + 'home/Cashback02.png'" class="order_wrap_img" ></image>
                  </view>
                  <view class="swiper_order_wrap_right">
                    <view class="order_wrap_right_title">
                      <view class="order_wrap_right_title_text">请先选一家店报名</view>
                    </view>
                    <view class="order_wrap_right_conent">
                      从下列商家中点击抢单报名，并且完成订单才能参与返现哦~
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>


      <!-- 定位失败提示 -->
      <view v-if="!zanwuloc" style="position: relative;z-index: 2;">
        <view class="noData_box">
          <image :src="BestImgUrl + '/index/zaiwuweizhi.png'"></image>
          <view style="font-size: 24rpx;color: #999;margin: 0 0 14rpx 0;">授权定位后，才能查看商家信息哦</view>
          <view class="lijipay" style="position: relative;z-index: 9;">
            <view class="tologon_btn" @click.stop="Toshouquan()">授权位置</view>
          </view>
        </view>
      </view>

      <!-- 店铺列表 -->
      <view class="shop_list_wrap_box" v-else-if="zanwuloc == true">
        <!-- 主要区域内容单独背景-->
        <view class="shop_item_bg"></view>
        <!-- 探店-菜单栏 -->
        <view v-if="header_index===1" class="menu_wrap" id="sortId">
          <home-new-scroll-menus ref="scrollMenus" :FenLeiList="FenLeiList" :current="current"
                                 @ClickScrMenu="clickScrMenu"></home-new-scroll-menus>
        </view>
        <!-- 探店-筛选-->
        <view v-if="header_index===1" class="sortBox" @click="addPopup" >
          <add-word
              :pVal="isShowPopup"
              :selectObj="selectObj"
              :switchVal="isShowSwitch"
              :tabberHeight="tabberHeight"
              @selectFun="selectFun"
              @ClickFormVal="ClickFormVal"
              @submitData="submitData"
              @ClickwordListVal="ClickwordListVal"
              @clickOnly="clickOnly"></add-word>
        </view>
        <!--官返分类菜单-->
        <view v-if="header_index===2" class="takeOut_menu">
          <WaimaiCashback :WaimaiCurrent="WaimaiCurrent" @navbarChange="navbarChange" />
        </view>
        <!-- 加载中提示 -->
        <view class="lanjiazai_wrap" v-if="skeletonLoading">
          <view class="lanjiazai_item">
            <view class="loading_icon">
              <image :src="BestImgUrl + '/index/logo_loading.gif'" class="loading_gif"></image>
            </view>
            <view class="tag">加载中...</view>
          </view>
        </view>
        <!-- 探店-店铺列表内容 -->
        <view v-if="!skeletonLoading && header_index===1">
          <view class="shop_list_wrap" v-if="shopsLists.length != 0">
            <!--<home-shops-list :shopList="shopsLists"></home-shops-list>-->
            <shops-list :shopList="shopsLists"></shops-list>
            <view class="chudijiazai">
              <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="60"
                          margin-bottom="60"/>
              <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()" style="text-align: center;">立即刷新</view>
            </view>
          </view>
          <!-- 暂无店铺提示 -->
          <view v-else-if="shopsLists.length == 0 && failTimeOutShow == false" class="noData_box shop_list_wrap_height" >
            <image :src="BestImgUrl + '/index/noData.png'" mode="widthFix" style="width: 60%"></image>
            <view v-if="Address == '正在定位...'">正在定位...</view>
            <view v-else>暂无店铺</view>
          </view>
          <!-- 网络错误提示 -->
          <view v-else-if="failTimeOutShow == true && shopsLists.length == 0" class="noData_box shop_list_wrap_height">
            <image src="/static/images/Frame33412.png"></image>
            <view class="timeOut">
              <view>网络好像出问题了~</view>
              <view @click="refurbish()">立即刷新</view>
            </view>
          </view>
        </view>
        <!-- 官返-店铺列表内容 -->
        <view v-if="!skeletonLoading && header_index===2" style="position: relative;z-index: 10;">
          <view class="shops_list_wrap" v-if="waimaiLists.length != 0">
            <view v-for="(items,index) in waimaiLists" :key="index" class="shops_list"><!--<shop-item v-if="items.shop_type === 1" :items="items"></shop-item>-->
              <WaimaiList :items="items" />
            </view>
            <view class="chudijiazai">
              <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                          margin-bottom="10"/>
              <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()" style="text-align: center;">立即刷新</view>
            </view>
          </view>
          <!-- 暂无店铺提示 -->
          <view v-else-if="waimaiLists.length == 0 && failTimeOutShow == false" class="noData_box shop_list_wrap_height">
            <image :src="BestImgUrl + '/index/noData.png'" mode="widthFix" style="width: 60%"></image>
            <view v-if="Address == '正在定位...'">正在定位...</view>
            <view v-else>暂无店铺</view>
          </view>
          <!-- 网络错误提示 -->
          <view v-else-if="waimaiLists.length == 0 && failTimeOutShow == true" class="noData_box shop_list_wrap_height">
            <image src="/static/images/Frame33412.png"></image>
            <view class="timeOut">
              <view>网络好像出问题了~</view>
              <view @click="refurbish()">立即刷新</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 分隔符 -->
      <view style="height: 10rpx;"></view>


      <!-- 定位失败弹窗 -->
      <u-popup v-model="AddressError_show" mode="bottom" z-index="10099" border-radius="34">
        <view class="address_error_wrap">
          <view class="address_error_title">获取位置失败</view>
          <view class="address_error_info">
            <image :src="BestImgUrl + '/index/address_erroe.png'"></image>
            <view class="infot_title">暂时定位不到您的城市</view>
            <view class="infot_subtitle">请宝子确认定位服务已经打开以便我们提供更精确的服务</view>
            <view class="infot_openBtn" @click.stop="Toshouquan()">开启定位</view>
          </view>
        </view>
      </u-popup>
      <!-- 外卖返现-下单前必看规则 -->
      <u-popup v-model="isRuleShow" mode="center" :closeable="true" z-index="1009" border-radius="34" width="90%" height="75%">
        <view class="rule_wrap">
          <view class="rule_title">
            <view class="rule_title_text">下单前必看规则</view>
            <u-line :color="'#E5E5E5'" :width="'100%'" :height="'1px'" style="padding: 20rpx 0;"></u-line>
          </view>
          <view class="rule_content">
            <scroll-view
                scroll-y="true"
                style="height: 100%"
            >
              <view class="rule_scroll">
                <view style="height: 50rpx;"></view>
                <u-parse :html="ruleContent" :lazy-load="true" :show-with-animation="true"></u-parse>
              </view>
            </scroll-view>
          </view>
        </view>
      </u-popup>
      <!--免费报名弹窗-->
      <u-popup v-model="isShowSignUp" mode="bottom" :safe-area-inset-bottom="true" closeable border-radius="34" width="90%" height="80%">
        <view class="sign_up_box">
          <view style="height: 30rpx;"></view>
          <scroll-view :scroll-y="true">
            <view class="sign_warp">
              <view class="challenge_item_img">
                <view class="challenge_item_img_text">
                  <text style="font-size: 48rpx">{{ challengeDetail.reward_value ? challengeDetail.reward_value.split('.')[0] : 0 }}</text>
                  <text style="font-size: 26rpx">元</text>
                </view>
                <image :src="BannerImg + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
              </view>
              <view class="challenge_item_content">
                <view class="challenge_item_content_title">
                  <view class="challenge_item_content_title_text">{{ challengeDetail.title }}</view>
                  <view class="challenge_item_content_title_msg">{{ challengeDetail.description }}</view>
                </view>
              </view>
            </view>
            <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
            <view class="sign_content">
              <view class="sign_content_warp">
                <view class="sign_content_title">报名须知</view>
                <view class="sign_content_item">
                  <text>活动开始时间</text>
                  <text>{{ challengeDetail.start_time }}</text>
                </view>
                <view class="sign_content_item">
                  <text>活动结束时间</text>
                  <text>{{ challengeDetail.end_time }}</text>
                </view>
                <view class="sign_content_item">
                  <text>任务完成时长</text>
                  <text>{{ challengeDetail.duration_days }}天</text>
                </view>
                <view class="sign_content_item">
                  <text>挑战奖励</text>
                  <text>{{ challengeDetail.reward_value }}</text>
                </view>
              </view>
              <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
              <view class="sign_content_warp">
                <view class="sign_content_title">挑战要求</view>
                <view class="sign_content_item">
                  <text>指定城市可参与</text>
                  <text>贵阳市</text>
                </view>
                <view class="sign_content_item">
                  <text>指定下单时段</text>
                  <text v-if="challengeDetail.apply_start_time">{{challengeDetail.apply_start_time}}-{{challengeDetail.apply_end_time}}</text>
                  <text v-else>无限制</text>
                </view>
              </view>
              <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
              <view class="sign_content_warp">
                <view class="sign_content_title" style="color: #FE7F08">注意事项</view>
                <view class="sign_content_text">
                  <view style="text-align: center;font-size: 40rpx;font-weight: bold;">活动规则</view>
                  <view>特别提示</view>
                  <view>参与活动前，请仔细阅读活动规则的各个条款，特别是与用户违规相关的条款。用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则的约束挑战赛基本规则</view>
                  <view>1. 活动门槛:领食周边购平台正常用户均可参与</view>
                  <view>2. 活动奖励规则:</view>
                  <view style="color: #fc4106">下单奖励：邀请用户第一次下单邀请方必定获得3元，第二次下单必定获得10元 ，第三次下单后随机奖励至多可获得10元。<br>
                    邀请奖励：若用户在活动期间内邀请2名用户下单，除下单奖励外可额外获得15元，若邀请5名用户下单即可额外获得25元，若邀请8名用户下单即可额外获得35元。<br>
                    PS:邀请奖励为阶梯式奖励，活动过程中领取奖励会根据邀请人数及被邀请用户的下单情况自动发放至账户余额。<br>
                    发放时间：订单完成后次日自动发放至账户余额<br>
                    邀请人最终获得的奖励为下单奖励+邀请奖励<br>
                  </view>
                  <view>3. 活动周期：本活动七天为一个周期，邀请好友即视为参与活动，活动可结束后可重新参与。</view>
                  <view>4. 奖励<text style="color: #fc4106">会根据邀请人数及被邀请用户的下单情况自动发放至账户余额</text>，用户可随时提现。</view>
                  <view>5. 活动为领食周边购平台发起，领食周边购为主办方。用户在参与活动及奖励领取和使用期间，用户应严格遵守法律法规的规定，以及《领食周边购用户服务协议》和本规则约定，遵循诚实信用原则，不从事任何违反国家法律法规、违反本规则，或任何扰乱领食周边购平台秩序，违反公序良俗、侵害社会公共利益、他人利益以及活动方利益的行为。若用户存在违规行为(包括但不限于恶意套现、机器作弊、刷信誉、提供虚假信息等)，领食周边购平台有权取消违规用户的参与资格，并收回其已领取现金奖励，必要时追究法律责任。违规行为的禁止用户不得从事任何违规、异常或不正当的行为(以下统称违规行为)，违规行为包括但不限于:</view>
                  <view>
                    （1）在领食周边购官方用户群内以任何直接或间接的形式获得团员包括但不限于转发海报、活动链接获得团员等行为;<br>
                    （2）每个新用户只能有一个邀请人，同一个登录账号、同一个手机号同司一个设备或同一提现账户，都视为同一个用户。通过小号作为新用户等作弊手段或利用机制漏洞获得奖励的行为;<br>
                    （3）通过任何不正当手段参与活动，如提供虚假订单、下单后联系商家私下取消订单、找商家返现、恶意退款等;<br>
                    （4）上传虚假截图或者上传他人订单截图，同一订单多次使用等;<br>
                    （5）盗用他人身份、领食周边购账号、提供虚假信息;<br>
                    （6）利用技术漏洞或规则漏洞下单、获取福利、补贴;<br>
                    （7）超出真实的消费需求购买商品;<br>
                    （8）批量或非出于交易目的注册账号、买号、养号;<br>
                    （9）从事其他违反《领食周边购用户服务协议》、活动规则或扰乱平台管理秩序的行为。<br>
                  </view>
                  <view style="font-size: 32rpx;font-weight: bold;padding: 20rpx 0">违规行为的判定</view>
                  <view>您授权并同意，领食周边购平台有权通过风控系统对用户是否存在前述违规行为进行判定，有权依据用户注册/登录信息、用户行为、普通人的正常交易习惯、互联网领域行业惯例、生活常识等大数据进行综合分析评估，并采取如下一种或多种违规处理措施:</view>
                  <view>
                    1.判定用户参与挑战赛的相关行为无效，包括但不限于用户自身及骑手、商家等他人原因导致的无效;<br>
                    2.驳回相关交易订单或者超时取消订单;<br>
                    3.限制或取消用户的活动资格;<br>
                    4.不发放奖励或用户已领取(含已使用以及未使用的)的奖励;<br>
                    5.撤销相关交易或活动福利，其他领食周边购平台为维护活动秩序、防止产生损失或依据有关协议/规则而采取的处理措施。请您理解，前述风控系统会随着活动发展、规则演变以及<br>
                    用户异常行为的增加和变化而发生变化，用户接受并认可风控系统对其行为的分析和判定，同时用户认可该系统涉及领食周边购平台的核心商业秘密，使用过程中不得恶意破坏或者窃取其系统信息。<br>
                  </view>
                  <view style="font-size: 32rpx;font-weight: bold;padding: 20rpx 0">其他说明</view>
                  <view>
                    1.如出现不可抗力或情势变更的情况(包括但不限于重大灾害事件、活动受政府机关指令需要停止举办或调整的、活动遭受严重网络攻击或因系统故障需要暂停举办的),则领食周边购平台可依相关法律法规的规定或活动规则的说明主张免责。<br>
                    2.在法律法规允许的范围内，领食周边购平台有权对本活动规则进行变动或调整，相关变动或调整将公布在活动规则页面上，用户继续参与活动则视为同意并接受变动或者调整后的活
                    动规则。如本规则约定与《领食周边购用户服务协议》不一致的，以本规则约定为准;本规则未尽事宜，详见《领食周边购用户服务协议》。用户若对活动规则中的任何条款或活动过程中的相关页面信息有任何疑问的，可咨询客服。若不同意活动规则任何条款或对活动过程中的页面信息(包括活动方变动或调整后的活动规则和页面信息)有异议的，请用户立即停止参与活动。<br>
                    3.本规则条款的标题仅作参考使用，不界定、影响或限定本规则条款的含义、描述及解释。条标与对应条款不一致的，以规则条款约定的内容为准。<br>
                  </view>
                  <view>
                    本活动由领食周边购平台及各城市运营商主办，最终解释权归领食周边购平台及其城市运营商所有。如有疑问请联系在线专属客服，或邮件与我们联系，邮箱operate@lszbg.com<br>
                    用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则的约束挑战赛基本规则。<br>
                  </view>
                </view>
              </view>
            </view>
            <view class="sign_up_box_btn" :style="{bottom: tabberHeight-10 + 'px'}">
              <view class="sign_up_box_rule">
                <view class="dianji">
                  <image @tap="check_icon()" v-if="check_on == !1" class="check_icon"
                         :src="BannerImg + '/image/choose_1.png'"></image>
                  <image @tap="check_icon()" v-else class="check_icon" :src="BannerImg + '/image/choose_2.png'">
                  </image>
                </view>
                <view class="sign_up_box_rule_text">
                  <text>我已阅读并同意</text>
                  <text style="font-weight: bold;color: #3D3D3D;">《领食惠探店挑战赛规则》</text>
                </view>
              </view>
              <view class="sign_up_box_text" @click="challengeSignUp(challengeDetail.id)">立即报名</view>
            </view>
            <!--底部tabbar高度-->
            <view class="tabber_height" :style="{height: tabberHeight-10 + 'px'}"></view>
          </scroll-view>
        </view>
      </u-popup>
      <!-- 客服教程 -->
      <view class="server_box" >
        <view @click="openService" class="help">
          <image :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
          <view style="color: #323232;font-size: 18rpx;">客服</view>
        </view>
        <view style="height: 10rpx"></view>
        <view
            @click="toNewUser" class="help">
          <image :src="`https://td.lszbg.com/public/uploads/h5/home/new_user.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
          <view style="color: #323232;font-size: 18rpx;">教程</view>
        </view>
        <view style="height: 10rpx"></view>
        <view @click="goTop" class="scrollToTop">
          <image :src="`https://td.lszbg.com/public/uploads/h5/home/top.png`" mode="widthFix" style="height:38rpx;width:38rpx"></image>
        </view>
      </view>


      <!-- 动画效果 -->
      <effectIndex v-if="showEffect" />

    </scroll-view>
    <!--底部tabber-->
    <view class="tabbar_height" :style="{height: tabberHeight + 'px'}"></view>
    <view class="tabber">
      <tdTabbar :tabbarIndex="tabbarIndex" @updateTabbar="updateTabbar" />
    </view>
    <!--banner放大二维码弹窗-->
    <u-popup v-model="showBanneQr" mode="center" :popup="false" :closeable="true" @close="showBanneQr = false" :mask="false" border-radius="20" width="90%" height="720">
      <view class="banner_qr_box">
        <view class="banner_qr_title">
          <text>长按识别二维码进群</text>
        </view>
        <view class="banner_qr_content">
          <!--长按二维码识别-->
          <image :src="BannerImg + '/home/banner_qr.png'" show-menu-by-longpress mode="widthFix" style="width: 90%;"></image>
        </view>
      </view>
    </u-popup>
    <!--微信小程序提示-->
    <!-- #ifdef MP-WEIXIN -->
    <!--<view class="topTip" v-if="showTip" @click="showTip=false" :style="{top: statusBarHeight + 32 + 'px'}">
      &lt;!&ndash;<u-navbar ></u-navbar>&ndash;&gt;
      <view class="icons">
        <u-icon name="arrow-up-fill" color="#000000" size="18" top="6"></u-icon>
      </view>
      <view class="tipAdd">
        <text style="margin-right: 20rpx">添加到我的小程序，下单更方便</text>
        <u-icon name="close" color="#fffff" size="18"></u-icon>
      </view>
    </view>-->
    <!-- #endif -->
  </view>
</template>


<script>
import HomeNavMenus from "../../components/home-nav-menus/home-nav-menus.vue";
import HomeNewScrollMenus from "../../components/home-scroll-menus/home-new-scroll-menus.vue";
const app = getApp();
import effectIndex from '@/components/effect-component/effect-index.vue'
import {baseUrl} from "@/api/request";
// import animationReward from "@/components/effect-component/animation-reward.vue";
// import effectList from "@/components/effect-component/effect-list.vue";
// import effectFirst from "@/components/effect-component/effect-first.vue";
// import animationError from "@/components/effect-component/animation-error.vue";
// import effectFinish from "@/components/effect-component/effect-finish.vue";
import WaimaiCashback from "@/components/Waimai/WaimaiCashback.vue";
import ShopsList from "@/components/home-shops-list/shops-list.vue";
import WaimaiList from "@/components/Waimai/WaimaiList.vue";
import tdTabbar from "@/components/td-tabbar/td-tabbar.vue";


export default {
  /*
  * effectFinish,
    animationError, effectFirst, effectList, animationReward,
  *  */
  components: {
    tdTabbar,
    WaimaiList,
    ShopsList,
    WaimaiCashback,
    HomeNavMenus,
    HomeNewScrollMenus,effectIndex,
  },
  data() {
    return {
      isToken: false, // 是否登录
      tabbarIndex: 1, // 底部tabbar索引
      tabberHeight: 0, // 底部tabber高度
      showFinishPopup: false, // 控制 effect-finish 弹窗显示
      BestImgUrl: app.globalData.imgurl,
      BannerImg: app.globalData.imgurlBwc,
      menuWidth: '', //右上角胶囊宽度
      menuHeight: '', //右上角胶囊高度
      backgroundColor: 'transparent',
      showTip: true, //加入微信小程序提示
      scHeight: 0,
      statusBarHeight: 0, //状态栏高度
      Address: '正在定位...',
      header_index: 1,//顶部导航栏索引
      barContent: 0,
      keyword: '',
      SouSuoTop: null,
      SwpierList: [],//banner背景
      //banner封面图
      SwpierImg: [],
      HomeNavList: [],
      navList: [], // 首页导航栏数组变量
      FenLeiList: [],//分类列表数组变量
      shopsLists: [],//店铺列表数组变量
      waimaiLists: [],//外卖列表数组变量
      WaimaiCurrent: 0,//外卖分类选中项
      pageSize: 1,
      pageNum: 10,
      category_id: '',
      is_top: '',
      iforderable: '',
      order_By: 1, // 筛选栏索引

      isAvailable: '',//显示可选值
      shopsType: '',
      is_shop_type: 1,
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      AddressError_show: false,
      isShow: false,
      showEffect: false, // 动画效果
      current: 0,
      //   地址栏字体滚动数据
      addWord: [
        "https://td.lszbg.com/public/uploads/h5/home/add-word1.png",
        "https://td.lszbg.com/public/uploads/h5/home/add-word2.png",
      ],
      //   禁止页面滚动变量
      isStopScroll: false,
      //   获取筛选数据
      filterData: [],
      isFilterFloat: false,//点击筛选导航栏时，导航栏浮动到顶部
      //   筛选导航栏选中状态
      selectObj: {
        selectVal: '',
        selectName: ''
      },
      //   筛选栏弹窗
      isShowPopup: false,
      //   switch 选中状态
      isShowSwitch: false,
      //   只看可选值
      availableVal: null,
      // 无门槛
      noRequire: '',
      // 单人餐-1，多人餐-2
      diners_num: 0,
      //  固定导航栏高度
      navFixedHeight: '',
      lunbotu: '', //轮播图高度
      swiperHeight: '', // 定位栏高度
      topBoxContent: '', // 顶部盒子高度
      homeMenuHeight: '', // 首页菜单高度
      heightSum: '',//高度之和
      /* 下单前必看规则 */
      isRuleShow: false,
      ruleContent: '',
      isChallengeOpen: false, // 所属地区是否开启挑战赛
      challengeData: [], // 挑战赛数据
      codeImg: '', // 福利群二维码
      isShowQRCode: false, // 是否显示福利群二维码弹窗
      // 是否显示报名弹窗
      isShowSignUp: false,
      // 是否勾选
      check_on: false,
      // 挑战赛详情
      challengeDetail: {},
      showBanneQr: false, //banner二维码弹窗是否显示
    }
  },
  onLoad(options) {
    let that = this
    this.menuWidth = uni.getMenuButtonBoundingClientRect().width;
    this.menuHeight = uni.getMenuButtonBoundingClientRect().height;
    uni.createSelectorQuery().select('.header_box').boundingClientRect(rect => {
      that.navFixedHeight = rect.height
    }).exec();
    // tabbar的高度
    uni.createSelectorQuery().select('.tabber').boundingClientRect(rect => {
      console.log('tabbar高度==', rect.height)
      that.tabberHeight = rect.height
    }).exec();
    uni.createSelectorQuery().select('.Top_box_wrap').boundingClientRect(rect => {
      that.lunbotu = rect.height
    }).exec();

    uni.createSelectorQuery().select('#sortId').boundingClientRect(rect => {
      that.homeMenuHeight = rect.height
      //console.log('顶部菜单高度===', rect.height)
    }).exec();
    // 顶部盒子高度
    uni.createSelectorQuery().select('.challenge-box').boundingClientRect(rect => {
      that.topBoxContent = rect.height
      console.log('顶部盒子高度===', that.topBoxContent)
    }).exec();
    //绑定推荐人-小程序端
    // #ifdef MP-WEIXIN
    console.log('二维码信息', options);
    if (JSON.stringify(options) != '{}') {
      let pdi = {
        parent_id: options.scene || options.parent_id,
        reseller_id: {
          reseller_id: uni.getStorageSync('reseller_id') || ''
        }
      }
      app.globalData.bindSaveParentId(pdi);
    } else {
    }
    // #endif

    let token = uni.getStorageSync('token')
    if (!token) {

    } else {
      that.isToken = true
      that.GetUserInfo()
    }

    let statusBarHeight =  uni.getWindowInfo().statusBarHeight;
    that.SouSuoTop = statusBarHeight + 44;
    console.log('状态栏的高度是：' + statusBarHeight + 'px');

    that.getplace()
    that.GetLunbo()
    that.GetNavlist()
    that.GetNavMenu() // 获取导航栏
    that.GetFenlei() // 获取分类
    that.getChallengeList() // 获取挑战赛
    // 动画效果是否显示
    that.showEffect = true;


    //选择地址回调刷新列表
    uni.$on('Getlist', (id) => {
      that.SelectMap()
    })
  },
  onShow() {
    let that = this
    let token = uni.getStorageSync('token')
    if (!token) {

    } else {
      //绑定推荐人
      let pdi = {
        parent_id: uni.getStorageSync('parent_id'),
        reseller_id: {
          reseller_id: uni.getStorageSync('reseller_id') || ''
        }
      }
      app.globalData.bindSaveParentId(pdi);
    }
    /* 获取福利群二维码 */
    const res = this.$api.GetFuliqun()
    res.then((result) => {
      console.log("二维码==",result.data.result.qr_code)
      this.codeImg = result.data.result.qr_code
    })
  },
  onReady() {
    this.getBarHeight()

  },
  watch: {

  },
  onPageScroll(e) {
    if (e.scrollTop >= 1) {
      if (this.header_index == 1){
        this.backgroundColor = 'linear-gradient( 180deg, #FF2C4E 0%, #FF8652 98%)'
      } else {
        this.backgroundColor = 'linear-gradient( 181deg, #F5D512 0%, #FFFAD8 100%)'
      }

    } else {
      this.backgroundColor = 'transparent'
    }
    this.scHeight = e.scrollTop
    // console.log('滚动距离==', this.scHeight)
  },
  //下拉刷新
  onPullDownRefresh() {
    let that = this
    that.category_id = ""
    let weidu = uni.getStorageSync('lat');
    // that.$refs.scrollMenus.guiWei()
    if (weidu && that.zanwuloc == true) {
      that.skeletonLoading = true
      that.failTimeOutShow = false
      // 只看可选取消选中状态
      that.isShowSwitch = false
      // 筛选菜单取消选中状态
      that.isShowFloat = 0
      that.pageSize = 1
      that.pageNum = 10
      setTimeout(function () {
        if (that.header_index === 1){
          that.GetShopslist()
        } else {
          that.waimaiLists = []
          that.pageNo = ''
          that.getTakeoutShopsList()
        }
        uni.stopPullDownRefresh();
      }, 1500);
    } else {
      setTimeout(function () {
        uni.stopPullDownRefresh();
      }, 1500);
    }

  },
  //触底加载
  onReachBottom() {
    console.log('触底加载')
    let that = this
    that.loadText.nomore = '没有更多了'
    that.Bottomingrefresh = false
    that.failTimeOutShow = false
    this.loadingstatus = 'loading';
    let weidu = uni.getStorageSync('lat')
    if (weidu && that.zanwuloc == true) {
      setTimeout(function () {
        that.pageSize++;
        if (that.header_index === 1){
          that.GetShopslist()
        } else {
          that.getTakeoutShopsList()
        }
        uni.hideNavigationBarLoading()
      }, 500);
    } else {
      setTimeout(function () {
        uni.hideNavigationBarLoading()
      }, 500);
    }
  },
  methods: {
    // 底部tabbar 点击事件
    updateTabbar(e){
      console.log('点击e=',  e)
      this.tabbarIndex = e.tabId
    },
    tabbarChange(e){
      console.log('点击了导航栏==', e)
    },
    // 附近店铺
    ToShopGps(){
      uni.navigateTo({
        url:  '/subpackageB/pages/shopMap/shopMap'
      })
    },
    // 顶部导航栏点击
    clickMenu(e) {
      let that = this
      that.header_index = e
      that.scHeight = 0
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500
      })
      if (e == 1){
        that.skeletonLoading = true
        // 页数重置1
        that.pageSize = 1
        // 清空数据
        that.shopsLists = []
        setTimeout(function () {
          that.GetShopslist()
        },1500)

      }
      if (e == 2){
        that.skeletonLoading = true
        // 获取swiper_box高度
        uni.createSelectorQuery().select('.takeOut').boundingClientRect(rect => {
          that.swiperHeight = rect.height
          console.log('takeOut高度==', rect.height)
        }).exec();
        // 判断用户是否登录
        // that.getTakeoutUserInfo()
        // 清空数据
        // that.waimaiLists = []
        // 加载外卖返现列表函数
        that.getTakeoutShopsList()
      }
    },
    change(item) {
      this.current = item.index;
      let that = this
      const tabData = this.FenLeiList[item.index]
      if (tabData.id == 41 || tabData.name == '推荐') {
        that.category_id = ""
      } else {
        that.category_id = tabData.id
      }

      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = 1
      that.pageNum = 10
      setTimeout(() => {
        that.GetShopslist()
      }, 1000)
    },
    rpxToPx(rpx) {
      const screenWidth = uni.getWindowInfo().screenWidth
      return (screenWidth * Number.parseInt(rpx)) / 750
    },
    getBarHeight() {
      let that = this
      uni.getSystemInfo({
        success: function (res) {
          that.statusBarHeight = res.statusBarHeight
        }
      });
      //console.log('页面高度====', that.statusBarHeight)
      /* console.log("this.$refs.navbar", this.$refs.navbar)
       const query = uni.createSelectorQuery().in(this);
       let that = this
       query
           .select("#barContent")
           .boundingClientRect((data) => {
             console.log("得到布局位置信息" + JSON.stringify(data));
             console.log("节点离页面顶部的距离为" + data.top);
             that.barContent = data.height
             // #ifdef H5
             that.barContent = that.barContent - 1
             // #endif
           })
           .exec();*/
    },
    //选择地图回来请求
    SelectMap() {
      let that = this
      that.Address = uni.getStorageSync('address') // || '正在定位...'
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = 1
      that.pageNum = 10
      setTimeout(() => {
        that.GetShopslist()
      }, 1000)
    },
    GetUserInfo() {
      let that = this
      that.$api.GetuserInfo({}).then(res => {
        console.log('用户信息', res.data.result);
        // 正则表达式匹配中国大陆的手机号格式
        const regex = /^1[3-9]\d{9}$/;
        /*if (!res.data.result.username) {
          that.showEffect = true;
        } else {
          that.showEffect = false;
        }*/
        uni.setStorageSync('userinfo', res.data.result)
      }).catch(err => {
      });
    },
    GetLunbo() {
      let that = this
      that.$api.gethomeBanner({}).then(res => {
        console.log('轮播图', res.data.result);
        this.SwpierList = res.data.result
        this.SwpierImg = res.data.result[0].video_poster
      }).catch(err => {

      })
    },
    GetNavlist() {
      let that = this
      that.$api.GetMenulist({}).then(res => {
        //console.log('首页导航', res.data.result);
        this.HomeNavList = res.data.result[0].list
      }).catch(err => {

      })
    },
    // 获取导航数据
    GetNavMenu() {
      let that = this
      // 获取探店分类接口
      that.$api.getHomeNav({}).then(res => {
        //console.log('导航栏', res.data.result[0].list);
        this.navList = res.data.result[0].list
      }).catch(err => {
        uni.showModal({
          title: '提示',
          content: '获取导航栏失败，请联系管理员。',
          confirmText: '确定',
        })
      })
    },
    //获取分类数据
    GetFenlei() {
      let that = this
      // 获取探店分类接口
      that.$api.bwcShopscategory({}).then(res => {
        //console.log('分类', res.data.result);
        this.FenLeiList = res.data.result
      }).catch(err => {
        uni.showModal({
          title: '提示',
          content: '获取分类失败，请联系管理员。',
          confirmText: '确定',
        })
      })
    },


    //获取店铺列表
    GetShopslist(res){
      let that = this
      // 贵阳坐标
      let position = {
        lat: 26.557808430989585,
        lon: 106.66976399739583
      }
      let lat = uni.getStorageSync('lat')
      let lon = uni.getStorageSync('lng')
      let CityName = uni.getStorageSync('CityName')
      let Province = uni.getStorageSync('Province')
      that.$api.getPackageShopList({
        // lat: lat, //纬度
        lat: position.lat, //纬度
        // lng: lon, //经度
        lng: position.lon, //经度
        discount_option: that.discount_option, //折扣选项
        special_price_option: that.special_price_option, //探店价选项
        packageOption: res,//动态筛选
        is_available: that.isAvailable, //是否可抢 0否 1是
        order_by: that.order_By, //排序：默认1综合排序、2实付最少、3距离最近、4返贴最多、5名额最多
        // platform_type: that.platform_type, //平台类型 1小红书 2抖音 3大众点评 4美团
        // max_level: that.max_level, //最大等级
        // min_level: that.min_level, //最小等级
        // max_fans_num: that.max_fans_num, //最大粉丝数
        // min_fans_num: that.min_fans_num, //最小粉丝数
        noRequire:that.noRequire, //无门槛筛选
        category_id: that.category_id,//套餐分类id
        is_top: that.is_top, //是否推荐
        diners_num: that.diners_num, //单人餐-1、多人餐-2
        page: that.pageSize,
        limit: that.pageNum,
        province: Province,
        city: CityName,

      }).then(res => {
        // 对每个列表新增是否显示按钮属性
        res.data.result.list.forEach(item => {
          item.isShowBtn = false // 默认不显示按钮
          item.packageList.forEach(item2 => {
            // sellOut 是否售罄
            item2.sellOut = (item2.stock - item2.daily_sales_num) === 0
          })
        })
        // console.log('套餐列表', res.data.result.list);
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false

        if (that.pageSize != 1) {
          if (res.data.result.list.length != 0) {
            that.loadingstatus = 'loading';
            that.shopsLists = that.shopsLists.concat(res.data.result.list)
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.shopsLists = res.data.result.list
          that.loadingstatus = 'nomore'
        }
        console.log('套餐列表', that.shopsLists);
        that.skeletonLoading = false
      }).catch(err => {
        if (!err.data) {
          //不存在就是访问超时或者接口错误
          //console.log('请求错误或请求超时', err.errMsg)
          that.skeletonLoading = false
          if (that.loadingstatus == 'loading') {
            that.loadingstatus = 'nomore'
            that.loadText.nomore = '网络好像出问题了~'
            that.Bottomingrefresh = true
          } else {
            that.shopsLists = []
            that.loadingstatus = 'loading'
            that.loadText.nomore = '没有更多了'
            that.Bottomingrefresh = false
            that.failTimeOutShow = true
          }
        } else {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      })
    },
    // 外卖套餐列表数据
    getTakeoutShopsList() {
      let that = this;
      let lat = uni.getStorageSync('lat')
      let lon = uni.getStorageSync('lng')
      let CityName = uni.getStorageSync('CityName')
      let Province = uni.getStorageSync('Province')
      let userPhone = uni.getStorageSync('userinfo').username
      that.$api.GetOfficialReturnShopListAPI({
        // that.$api.getPackageList({
        pagePvId: that.pageNo === 1 ? '' : that.pageNo,
        limit: that.pageNum,
        // province: Province,
        // city: CityName,
        lat: lat,
        lon: lon,
        mt_mobile: userPhone,
        searchWord: '',
        sortType: 1,
        categoryTypeList:  [that.takeout_category_id] ? [that.takeout_category_id] : 0,
      }).then(res => {
        console.log('套餐列表', res.data.result)
        that.pageNo = res.data.result.pagePvId
        // 本地缓存美团ID
        uni.setStorageSync('meituanPvId', res.data.result.meituanPvId)
        if (res.data.code === 200){

          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          if (that.pageSize != '') {
            if (res.data.result.poiList.length != 0) {
              that.loadingstatus = 'loading';
              // 获取下单前必看规则 ruleContent
              that.ruleContent = res.data.result.poiList[0].new_activityRule
              that.waimaiLists = that.waimaiLists.concat(res.data.result.poiList)
            } else {
              that.loadingstatus = 'nomore'
              console.log('没有更多了')
            }
          } else {
            that.waimaiLists = res.data.result.poiList
            that.loadingstatus = 'nomore'
          }
          console.log('外卖套餐列表', that.waimaiLists)
          that.skeletonLoading = false
        }
      }).catch(err => {
        if (!err.data) {
          //不存在就是访问超时或者接口错误
          console.log('请求错误或请求超时', err.data)
          that.skeletonLoading = false
          if (that.loadingstatus == 'loading') {
            that.loadingstatus = 'nomore'
            that.loadText.nomore = '没有更多了~'
            that.Bottomingrefresh = false
          } else {
            that.waimaiLists = []
            that.loadingstatus = 'loading'
            that.loadText.nomore = '没有更多了'
            that.Bottomingrefresh = false
            that.failTimeOutShow = true
          }
        } else {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      })
    },
    // 菜单点击事件
    clickScrMenu(data) {
      const item = data.item
      this.current = data.index
      //console.log('点击菜单', data)
      let that = this

      if (item.name == '推荐') {
        that.category_id = ""
        that.is_top = 1
      }else if(item.name == '全部'){
        that.category_id = ""
        that.is_top = 0
      } else {
        that.category_id = item.id
        that.is_top = 0
      }

      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = 1
      that.pageNum = 10
      setTimeout(() => {
        that.GetShopslist()
      }, 1000)
    },
    // 官返-导航点击事件
    navbarChange(item, index){
      let that = this
      console.log('分类点击事件', item)
      that.scHeight = 0
      that.takeout_category_id = item.code
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      // 选中分类项
      that.WaimaiCurrent = index
      // 清空第一页数据
      that.waimaiLists = []
      that.pageNo = ''
      // that.pageSize = 1
      setTimeout(() => {
        that.getTakeoutShopsList()
      }, 1000)
    },
    // 筛选条件表单提交数据
    submitData(data){
      console.log('筛选条件表单提交数据', data);
      let that = this
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = 1
      that.pageNum = 10
      // 数据处理
      setTimeout(() => {
        that.GetShopslist(data)
      }, 1000)
      // 关闭弹窗
      // this.isShowPopup = false;
    },

    //网络错误等原因-刷新重试商家列表
    refurbish() {
      let that = this
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = 1
      that.pageNum = 10
      setTimeout(() => {
        that.GetShopslist()
      }, 1000)
    },
    //触底加载中的刷新
    RefreshBtn() {
      let that = this
      that.loadingstatus = 'loading'
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.GetShopslist()
    },
    //跳转搜索
    Tosearch() {
      let token = uni.getStorageSync('token')
      if (!token) {
        // #ifdef APP-PLUS
        uni.navigateTo({
          url: '/subpackageB/pages/newAppLogin/newAppLogin'
        })
        // #endif

        // #ifdef MP-WEIXIN
        uni.navigateTo({
          url: '/pages/login/login'
        })
        // #endif
      } else {
        uni.navigateTo({
          url: '/subpackageA/pages/search/search?keys=' + this.keyword
        })
      }
    },
    // 跳转到官返搜索
    ToGfsearch(){
      let token = uni.getStorageSync('token')
      if (!token) {
        // #ifdef APP-PLUS
        uni.navigateTo({
          url: '/subpackageB/pages/newAppLogin/newAppLogin'
        })
        // #endif

        // #ifdef MP-WEIXIN
        uni.navigateTo({
          url: '/pages/login/login'
        })
        // #endif
      } else {
        uni.navigateTo({
          url: '/pages/feast/feast_search'
        })
      }
    },
    //跳转选择当前位置
    Toaddres() {
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      } else {
        uni.navigateTo({
          url: '/addressPages/pages/myAddress/selectAddress'
        })
      }
    },
    //去授权位置按钮
    Toshouquan() {
      let that = this

      // #ifdef MP-WEIXIN
      //如果小程序用户拒绝定位后，需要重新打开授权定位
      wx.openSetting({
        success(res) {
          // 操作完成后，检查用户是否授权该权限
          if (res.authSetting['scope.userLocation']) {
            // 用户已授权获取位置信息，进行相应操作
            that.zanwuloc = true
            that.AddressError_show = false
            uni.showLoading({
              title: '获取位置中..'
            })
            setTimeout(() => {
              uni.hideLoading()
            }, 3000)
            that.getplace()
          } else {
            that.zanwuloc = false
            that.AddressError_show = true
          }
        }
      });
      // #endif

    },
    //获取位置
    getplace() {
      let that = this
      uni.getLocation({
        type: 'gcj02',
        // highAccuracyExpireTime: "3000", //高精度定位超时时间(ms)
        // isHighAccuracy: true, //开启高精度定位
        success: function (res) {
          console.log('小获取经纬度', res)
          // that.keyword = res.latitude;
          // let wdu = '24.890854'
          // let jdu = '102.82961'
          let wdu = res.latitude
          let jdu = res.longitude
          uni.setStorageSync('lat', wdu);
          uni.setStorageSync('lng', jdu);
          that.Analysis(jdu, wdu)
        },
        fail: function (err) {
          // let wdu = "26.62959"
          // let jdu = "106.75208"
          // uni.setStorageSync('lat', wdu);
          // uni.setStorageSync('lng', jdu);
          // that.Analysis(jdu, wdu)
          // TODO
          uni.showToast({
            title: '授权定位失败' + JSON.stringify(err),
            icon: 'none',
            duration: 5000
          });
          that.skeletonLoading = false
          that.zanwuloc = false
          that.AddressError_show = true
        }
      });
    },
    //解析位置
    Analysis(jd, wd) {
      let that = this
      //console.log('解析位置开始');
      that.$api.ResolveAddress({
        lat: wd,
        lng: jd
      }).then(res => {
        //console.log('解析位置', res.data.result);
        that.Address = res.data.result.street
        uni.setStorageSync('CityName', res.data.result.city)
        uni.setStorageSync('Province', res.data.result.province)
        uni.setStorageSync('address', res.data.result.street)
        //获取商家列表
        that.pageNum = 10
        that.pageSize = 1
        that.GetShopslist()
      }).catch(err => {
        //console.log('解析位置', err);
        that.skeletonLoading = false
      });
    },
    //点击轮播图
    clickslide(idx) {
      let that = this
      let item = that.SwpierList[idx]
      //console.log('点击了轮播图', item)
      if (item.type == 2) { //跳转tabbar类型
        uni.switchTab({
          url: item.path
        })
      } else if (item.type == 1) { //跳转nav类型
        uni.navigateTo({
          url: item.path + '?title=' + item.title,
          animationType: 'pop-in'
        })
      } else if (item.type == 3) { //跳转h5url类型
        // #ifdef MP-WEIXIN || APP-PLUS
        uni.navigateTo({
          url: '/pages/Webview/Webview?url=' + encodeURIComponent(JSON.stringify(item.path)),
          animationType: 'pop-in'
        })
        // #endif
        // #ifdef H5
        window.location.href = item.path
        // #endif
      } else if (item.type == 4) { //跳转小程序类型
        //#ifdef APP-PLUS
        that.JumpMiniAppApp(item.original_id, item.path)
        //#endif
        // #ifdef MP-WEIXIN
        that.JumpMiniAppMini(item.appid, item.path)
        // #endif
      }
    },
    //跳转小程序-微信端
    JumpMiniAppMini(aid, apath) {
      uni.openEmbeddedMiniProgram({
        appId: aid,
        path: apath,
        envVersion: 'release',
        success(res) {
        }
      });
    },
    //跳转小程序-APP
    JumpMiniAppApp(aid, apath) {
      plus.share.getServices(function (res) {
        var sweixin = null;
        for (var i = 0; i < res.length; i++) {
          var t = res[i];
          if (t.id == 'weixin') {
            sweixin = t;
          }
        }
        if (sweixin) {
          sweixin.launchMiniProgram({
            id: aid,
            path: apath,
            type: 0 // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0
          });
        }
      }, function (res) {
      });
    },


    onShareAppMessage() {
      let myid = uni.getStorageSync('userinfo').id
      return {
        title: '领食惠探店邀你一起全民探店知识换美食~',
        path: '/pages/index/index?parent_id=' + myid,
        imageUrl: this.BestImgUrl + '/index/share.png',
        success: (res) => {
        },
        fail: (res) => {
        }
      }
    },
    onShareTimeline() {
      let myid = uni.getStorageSync('userinfo').id
      return {
        title: '惠享美食 乐在领食 邀你一起吃线下霸王餐',
        query: '/pages/index/index?parent_id=' + myid,
        imageUrl: this.BestImgUrl + '/index/share.png',
        success: (res) => {
        },
        fail: (res) => {
        }
      }
    },

    ClickwordListVal(res){
      console.log('筛选tab事件=', res)

      let that = this
      that.isFilterFloat = true
      // 只看可抢的选中状态
      this.isShowSwitch = res.isSwitchSee
      // 导航选中状态
      that.selectObj = {
        selectVal: res.wordListVal,
        selectName: res.itemObj.name
      }

      // 筛选导航提交值
      that.order_By  = res.itemObj.value
      // 无门槛
      if (res.itemObj.id == 7){
        that.order_By = ''
        that.noRequire = 1;
      }else{
        that.noRequire = '';
      }
      // 单人餐 / 多人餐
      if (res.itemObj.id === 3 || res.itemObj.id === 4){
        that.diners_num = res.itemObj.diners_num
      }else{
        that.diners_num = '';
      }
      // 清空只看可抢
      that.isAvailable = 0
      // console.log('diners_num=', that.diners_num)
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = 1
      that.pageNum = 10
      // 数据处理
      setTimeout(() => {
        if(res.index !== 0 && res.index !== 1){
          that.GetShopslist()
        }else{
          that.GetShopslist()
        }

      }, 1000)

      // 弹窗确认
      // this.isShowPopup = res.isPop
    },
    // 筛选tab选中导航栏
    ClickWordHead(res){
      console.log('筛选tab事件=', res)
      let that = this
      // 滚动到顶部
      that.heightSum = that.lunbotu + that.homeMenuHeight - 30
      uni.pageScrollTo({
        // selector: '#sortId', // 需要滚动到的元素的id或class
        scrollTop:that.heightSum,
        duration: 300 // 滚动动画的时长，单位ms
      });
      // 筛选导航选中状态
      that.selectObj = {
        selectVal: res.wordListVal,
        selectName: res.itemObj.name
      }

      // 筛选导航提交值
      that.order_By  = res.itemObj.value
      // 无门槛
      if (res.itemObj.id == 7){
        that.order_By = ''
        that.noRequire = 1;
      }else{
        that.noRequire = '';
      }
      // 单人餐 / 多人餐
      if (res.itemObj.id === 3 || res.itemObj.id === 4){
        that.diners_num = res.itemObj.diners_num
      }else{
        that.diners_num = '';
      }
      // 清空只看可抢
      that.isAvailable = 0

      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.shopsLists = []
      that.pageSize = 1
      that.pageNum = 10
      // 数据处理
      setTimeout(() => {
        if(res.index !== 0 && res.index !== 1){
          that.GetShopslist(that.order_By )
        }else{
          that.GetShopslist()
        }
      }, 1000)
      // 弹窗确认
      // this.isShowPopup = res.isPop
    },
    ClickFormVal(res){
      let that = this
      // 导航选中状态
      that.selectObj = {
        selectVal: res.wordListVal,
        selectName: res.itemObj.name
      }
      // 只看可抢的选中状态
      that.isAvailable = 0
      that.isShowSwitch = res.isSwitchSee
    },
    clickOnly(res){
      let that = this
      // swich选中状态
      //console.log('switch事件=', res)
      // 只看可抢的选中状态
      that.isShowSwitch = res.switchSeeVal
      // 筛选导航取消选中
      that.selectObj = {
        selectVal: res.wordVal,
        selectName: ''
      }
      // 清空单人多人餐
      that.diners_num = '';
      // 清空无门槛
      that.noRequire = '';
      if(res.switchSeeVal === true){
        // 筛选导航提交值
        // that.availableVal = 1
        that.loadingstatus = 'nomore'
        that.Bottomingrefresh = false
        that.failTimeOutShow = false
        that.skeletonLoading = true
        that.pageSize = 1
        that.pageNum = 10
        that.isAvailable = 1
        // 数据处理
        setTimeout(() => {
          that.GetShopslist()
        }, 1000)
      }else {
        // 筛选导航提交值
        // that.availableVal = 0
        that.loadingstatus = 'nomore'
        that.Bottomingrefresh = false
        that.failTimeOutShow = false
        that.skeletonLoading = true
        that.pageSize = 1
        that.pageNum = 10
        that.isAvailable = 0
        // 数据处理
        setTimeout(() => {
          that.GetShopslist(0)
        }, 1000)
      }

    },

    selectFun(res){
      let that = this
      console.log('下拉点击事件', res);
      // 筛选导航选中状态
      that.selectObj = {
        selectVal: res.wordListVal,
        selectName: res.itemObj.name
      }
      // 只看可选的选中状态
      that.isAvailable = 0
      that.isShowSwitch = res.switchSeeVal

      // 筛选导航提交值
      that.order_By = res.itemObj.value
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = 1
      that.pageNum = 10
      // 数据处理
      setTimeout(() => {
        that.GetShopslist()
      }, 1000)
    },
    //   筛选点击事件
    addPopup(){
      // 滚动到顶部
      this.heightSum = this.lunbotu + this.homeMenuHeight - 30
      uni.pageScrollTo({
        // selector: '#sortId', // 需要滚动到的元素的id或class
        scrollTop:this.heightSum,
        duration: 300 // 滚动动画的时长，单位ms
      });
      //console.log('滚动到顶部', this.heightSum)

    },
    // 官返-打开弹窗，阻止滚动事件
    openPopup(){
      //打开下单前必看弹窗
      this.isRuleShow=true;
      // 禁止下拉刷新
      uni.stopPullDownRefresh();
    },
    // 打开教程
    toNewUser(){
      uni.navigateTo({
        url: "/subpackageB/pages/xsjc/xsjc"
      })
    },
    // 打开banner视频
    goVideoPage(){
      uni.navigateTo({
        url: "/subpackageB/pages/indexVideo/indexVideo"
      })
    },
    // 判断所属地区是否开启挑战赛
    getChallengeOpen(item){
      let that = this
      that.isChallengeOpen = item
    },
    // 获取挑战赛数据
    /* 挑战赛列表 */
    getChallengeList() {
      let that = this
      that.$api.getChallengeActivityListAPI({}).then(res => {
        // console.log('挑战赛列表', res.data.result.list)
        that.challengeData = res.data.result.list
        if (res.data.result.list.length > 0){
          that.isChallengeOpen = true
          res.data.result.list.forEach(item => {
            let nowTime = new Date().getTime()
            let startTime = new Date(item.start_time).getTime()
            let endTime = new Date(item.end_time).getTime()
            if (nowTime < startTime){
              item.isTimeOut = 1
            } else if (nowTime >= startTime && nowTime <= endTime){
              item.isTimeOut = 2
            } else if (nowTime > endTime){
              item.isTimeOut = 3
            }
          })

        }
        console.log('挑战赛列表', that.challengeData)

      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
      })
    },
    // 返回顶部
    goTop() {
      console.log('返回顶部')
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500
      })
    },
    // 打开客服
    openService(){
      // #ifdef MP
      const data = uni.getStorageSync('customerServiceData')
      console.log('跳转到客服', data);
      wx.openCustomerServiceChat({
        //企业微信的企业id
        corpId:  data.app.corpId,
        extInfo: {
          //客服链接
          url: data.app.url
        },
        success(res) {
          //console.log('跳转成功', res)
        },
        fail(res) {
          //console.log('跳转失败', res)
        }
      })
      // #endif
    },
    // 点击图片放大预览
    clickImg(res){
      console.log('图片放大预览=', res)
      if (res.qrImg){
        this.showBanneQr = true
      }else{
        uni.previewImage({
          urls: [res],
          current: res,
        })
      }
    },
    // 子组件传递值给首页挑战赛报名
    ShowSignUp(item){
      console.log('挑战赛详情', item)
      this.challengeDetail = item
      this.isShowSignUp = true
    },
    // 勾选同意规则
    check_icon() {
      if (this.check_on == !0) {
        this.check_on = !1
        this.Lowcheck_on = 1
      } else {
        this.check_on = !0
        this.Lowcheck_on = 0
      }
    },
    /* 挑战赛免费报名 */
    challengeSignUp(id){
      let that = this
      console.log('check_on', that.check_on)
      if (!that.check_on) {
        uni.showToast({
          title: '请先阅读并同意活动规则',
          icon: 'none',
          duration: 2000
        });
        return
      }
      // 免费报名提交
      that.$api.getJoinChallengeActivityAPI({
        challenge_id: id
      }).then(res => {
        uni.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        });
        // 重置报名弹窗规则
        this.check_on = 0
        // 关闭弹窗
        that.isShowSignUp = false
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        })
      })
    },
  }
}
</script>

<style lang="scss">
page {

  background-color: #f4f4f4;
}
/deep/ scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.stopScroll{

}
.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  /* 顶部tab */
  .header_box  {
    display: flex;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    .header_list  {
      font-size: 32rpx;
      padding: 14rpx 0;
      margin: 0 30rpx;
      display: flex;
      align-items: center;
      position: relative;
      color: #FFFFFF;
      .sanJiaoXing{
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 0rpx solid transparent;
        border-bottom: 26rpx solid #FFE646;
        position: absolute;
        bottom: 0;
      }
      .icon-arrow-right{
        font-size: 24rpx;
        padding: 4rpx 6rpx;
        border-radius: 12rpx 12rpx 12rpx 0;
        color: #141414;
        background: #FFE646;
        margin-left: 8rpx;
        font-weight: normal;
      }
      .active_line{
        width: 100%;
        height: 8rpx;
        border-radius: 100rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #FFFFFF;
      }
    }
    .header_list_active{
      font-weight: bold;
    }

  }
}

.status-bar {
  height: var(--status-bar-height) + 'px';
}

.lunbotu {
  width: 100%;
  height: 866rpx;
  position: absolute;
  top: 0;
}
.lunbotu image {
  width: 100%;
  height: 750rpx;
}
/* 顶部当前位置和搜索css */
.Top_box_content{
  width: 100%;
  position: relative;
  z-index: 8;
  /* 当前位置css */
  .address-box{
    width: 100%;
    height: 88rpx;
    padding: 0 10rpx;
    display: flex;
    /* 定位css */
    .nav_bar {
      width: calc(100% - 220rpx - 150rpx);
      height: 88rpx;
      position: relative;
      .address{
        max-width: 260rpx;
        height: 88rpx;
        line-height: 88rpx;
        color: #FFFFFF;
      }
    }
    // 地址栏滚动字体
    .add-word {
      width: 200rpx;
      height: 88rpx;
      padding-right: 20rpx;
    }
    /* 附近店铺css */
    .search-shop-gps{
      width: 150rpx;
      height: 88rpx;
      text-align: center;
      .search-shop-gps-text{
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }
  /* 搜索 */
  .search-container {
    padding: 0 20rpx 20rpx;
    position: relative;
    .search-button {
      background: linear-gradient( 90deg, #FD3F03 4%, #FE7F08 100%);
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      color: #FFFFFF;
      font-size: 28rpx;
      text-align: center;
      position: absolute;
      right: 30rpx;
      top: 6rpx;
      transition: all 1s ease;
    }
    .sou_suo {
      padding: 10rpx 0;
      position: absolute;
      left: 20rpx;
      right: 20rpx;
      z-index: 2;
      display: flex;
      .search-uSearch{
        // width: calc(100% - 150rpx);
        width: 100%;
      }

    }
  }
  /* 轮播图内容css */
  .banner_img{
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    border-radius: 0 0 16rpx 16rpx;
    overflow: hidden;
    .banner_swiper_content{
      position: relative;
      .banner_swiper_bg{
        width: 100%;
        padding-top: 50rpx;
      }
      .banner_swiper_warp{
        position: absolute;
        top: 0;
        left: 20rpx;
        right: 20rpx;
        text-align: center;
        .banner_swiper_title{
          font-size: 28rpx;
          color: #FF4313;
          line-height: 40rpx;
          padding: 40rpx 0 10rpx;
          text-align: left;
        }
        .banner_swiper_foot{
          font-size: 24rpx;
          color: #444444;
          line-height: 40rpx;
          text-align: left;
          display: flex;
          .banner_swiper_foot_text{
            height: 100%;
          }
          .banner_swiper_foot_qr{
            width: 108rpx;
            height: 108rpx;
          }
        }
      }
    }
  }
}
/* 浮动窗口css */
.address-container {
  display: flex;
  flex-direction: column;
  width: 750rpx;
  /* 探店-浮动窗口 */
  .address-box {
    width: 100%;
    height: 88rpx;
    padding: 0 10rpx;
    display: flex;
    align-items: center;
    /* 搜索 */
    .search-container {
      width: calc(100% - 150rpx);
      padding: 0 20rpx;
      position: relative;
      border-radius: 100rpx;
      .search-button {
        background: linear-gradient( 90deg, #FD3F03 4%, #FE7F08 100%);
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        text-align: center;
        position: absolute;
        right: 30rpx;
        top: 6rpx;
        transition: all 1s ease;
      }
      .sou_suo {
        padding: 10rpx 0;
        position: absolute;
        left: 20rpx;
        right: 20rpx;
        z-index: 2;
        display: flex;
        .search-uSearch{
          // width: calc(100% - 150rpx);
          width: 100%;
        }

      }
    }
    /* 附近店铺css */
    .search-shop-gps{
      width: 150rpx;
      height: 88rpx;
      text-align: center;
      display: flex;
      align-items: center;
      .search-shop-gps-text{
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }
  /* 官返-浮动窗口 */
  /* 官返-浮动窗口 分类导航menu */
  .takeOut_menu_float{
    // height: 90rpx;
    margin-bottom: 20rpx;
  }

}

.banner-word{
  height: 160rpx;
  margin-bottom: 20rpx;
  position: relative;
  .banner_mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    display: flex;
    align-items: center;
    .banner_icon{
      width: 80rpx;
      height: 80rpx;
      line-height: 86rpx;
      padding-left: 4rpx;
      background: rgba(0,0,0,0.3);
      border-radius: 50%;
      text-align: center;
      margin: 0 auto;
    }
  }
  /* .banner-word-eye{
    display: flex;
    .eye-box{
      width: 30rpx;
      height: 30rpx;
      background: #FFFFFF;
      border: 4rpx solid #3D3D3D;
      border-radius: 50%;
      .eye-text{
        width: 16rpx;
        height: 19rpx;
        display: block;
        background: #3D3D3D;
        border-radius: 50%;
      }
    }
  } */
}
/* 挑战赛css */
.challenge-box{
  height: 150rpx;
  padding: 0;
  margin-bottom: 20rpx;
}

/* 主题内容css */
.Top_box_wrap{
  position: relative;
  /* 探店css */

  /* 官返css */
  .takeOut_head_bg{
    width: 100%;
    height: 1000rpx;
    position: absolute;
    top: 0;
    background: linear-gradient( 181deg, #F5D512 0%, #FFFAD8 80%, #F5F5F5 100%);
  }
  .takeOut{
    height: 782rpx;
    position: relative;
    z-index: 10;
    /* 官返搜索css */
    .takeOut_address_box{
      width: 100%;
      height: 88rpx;
      padding: 0 10rpx;
      display: flex;
      align-items: center;
      /* 当前位置 */
      .nav_bar{
        width: 55%;
      }
      /* 搜索 */
      .search-container {
        width: 45%;
        position: relative;
        border-radius: 100rpx;
        .search-button {
          background: linear-gradient( 90deg, #FD3F03 4%, #FE7F08 100%);
          width: 120rpx;
          height: 60rpx;
          border-radius: 30rpx;
          color: #FFFFFF;
          font-size: 28rpx;
          text-align: center;
          line-height: 52rpx;
          position: absolute;
          right: 6rpx;
          top: 6rpx;
          transition: all 1s ease;
        }
        .sou_suo {
          padding: 10rpx 0;
          position: absolute;
          left: 20rpx;
          right: 20rpx;
          z-index: 2;
          display: flex;
          .search-uSearch{
            // width: calc(100% - 150rpx);
            width: 100%;
          }

        }
      }
    }
    /* 官返-banner-图片 */
    .takeOut_banner{
      width: 100%;
      display: flex;
      .takeOut_banner_left{
        flex: 1;
        height: 180rpx;
        padding-left: 20rpx;
        margin-top: 30rpx;
        .swiper_img1{
          width: 308rpx;
          height: 64rpx;
        }
        .swiper_text{
          font-size: 32rpx;
          height: 100rpx;
          line-height: 100rpx;
        }
      }
      .takeOut_banner_right{
        width: 256rpx;
        .swiper_img2{
          width: 256rpx;
          height: 240rpx;
        }
      }
    }
    /* banner css */
    .Cashback{
      padding: 20rpx;
      margin-top: -50rpx;
      position: relative;
      z-index: 10;
      .Cashback_content{
        padding: 20rpx;
        background: linear-gradient( 180deg, rgba(255,253,236,0.95) 0%, #FFFFFF 100%);
        border-radius: 30rpx;
        .swiper_wrap_title{
          width: 100%;
          height: 80rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .swiper_wrap_title_img{
            width: 216rpx;
            height: 40rpx;
          }
          .swiper_wrap_title_text{
            line-height: 80rpx;
            font-size: 24rpx;
            color: #888888;
          }
        }
        .step_wrap{
          width: 100%;
          position: relative;
          .step_wrap_line{
            height: 8rpx;
            background: #D1D1D1;
            margin: 30rpx 20rpx;
          }
          .step_wrap_content{
            margin-top: -49rpx;
            .step_wrap_content_item{
              width: 33.33%;
              height: 80rpx;
              display: inline-block;
              position: relative;
              .step_wrap_content_item_num{
                width: 32rpx;
                height: 32rpx;
                font-size: 28rpx;
                color: #FFFFFF;
                background: #D1D1D1;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                .step_wrap_content_item_num_round{
                  width: 28rpx;
                  height: 28rpx;
                  border-radius: 50%;
                  background: #FFFFFF;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
                .step_wrap_content_item_t{
                  width: 20rpx;
                  height: 20rpx;
                  display: block;
                  border-radius: 50%;
                  background: #FF530E;
                }
              }
              .step_wrap_content_item_text{
                margin-top: 20rpx;
                font-size: 26rpx;
              }
            }
            .step_wrap_content_item:nth-child(1){
              .step_wrap_content_item_num{
                background: #FF530E;
              }
            }
            .step_wrap_content_item:nth-child(2){
              .step_wrap_content_item_num{
                margin: 0 auto;
              }
              .step_wrap_content_item_text{
                text-align:center;
              }
            }
            /* .step_wrap_content_item:nth-child(3){
              .step_wrap_content_item_num{
                margin-left: 60%;
              }
              .step_wrap_content_item_text{
                margin-right: -60rpx;
                text-align: center;
              }
            } */
            .step_wrap_content_item:last-child{
              .step_wrap_content_item_num{
                position: absolute;
                right: 0;
                top: -32rpx;
              }
              .step_wrap_content_item_text{
                text-align: right;
              }
            }
          }
        }
        .swiper_order_wrap{
          width: 100%;
          display: flex;
          justify-content: space-between;
          .swiper_order_wrap_left{
            width: 344rpx;
            position: relative;
            .order_qiangdan{
              width: 140rpx;
              height: 140rpx;
              border: 4rpx solid #FEAA5A;
              border-radius: 50%;
              background: #FFFFFF;
              position: absolute;
              right: 0;
              bottom: 0;
              z-index: 10;
              padding: 30rpx 0;
              .order_qiangdan_text{
                font-size: 24rpx;
                width:120rpx;
                height: 48rpx;
                line-height: 48rpx;
                text-align: center;
                color: #FFFFFF;
                margin: 0 auto;
                background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
                border-radius: 30rpx;
              }
              .order_remainder{
                font-size: 24rpx;
                line-height: 40rpx;
                text-align: center;
              }
            }
            .order_wrap_img{
              width: 344rpx;
              height: 212rpx;
            }
          }
          .swiper_order_wrap_right{
            flex: 1;
            padding-left: 20rpx;
            .order_wrap_right_title{
              height: 80rpx;
              line-height: 80rpx;
              .order_wrap_right_title_text{
                font-size: 30rpx;
                color: #3D3D3D;
                font-weight: bold;
              }
            }
            .order_wrap_right_conent{
              font-size: 26rpx;
              color: #666666;
              line-height: 40rpx;
            }
          }
        }
      }

    }

  }
  .takeOut_search_scroll{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 4rpx 10rpx;
    background: #FFFFFF;
  }

}

//导航栏 css
.home_menu_wrap{
  height:162rpx;
  position: relative;
  padding: 0rpx 20rpx 20rpx 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  border: 4rpx solid #FFFFFF;
  border-radius: 32rpx;
  background: linear-gradient( 180deg, #FFFDEC 0%, #FFFFFF 100%);
  //background-image: linear-gradient(to top, #FFFDEC, #FFFFFF), linear-gradient(to top, #FFFDEC, #FFFFFF);
}
//分类
.menu_wrap {
  position: relative;

  border: 2px solid transparent;
  border-radius: 40rpx;
  //margin-top: -60rpx;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  //background-image: linear-gradient(to top, #FBFBF8, #FFFBED), linear-gradient(to top, #FBFBF8, #FFE547);
}



//筛选css
.sortBox {
  padding: 0 20rpx;
  height: 90rpx;
  position: relative;
  z-index: 10;
  // margin-bottom: 10rpx;
  .sort_box_wrap{
    width: 100%;
    height: 100%;
    position: absolute;top: 0;left: 0;z-index: 20;

  }
  .activeClass{
    display: none;
  }
}
.fiexdView{
  position: fixed;
  top: 300rpx;
}
.add-word-head{
  padding: 10rpx 20rpx 20rpx 20rpx;
  height: 110rpx;
  position: relative;
  z-index: 1000;
}
.sort-popup{
  position: fixed;
  top: 300rpx;
  left: 0;
  right: 0;
  z-index: 100;
  height: 100%;
  .sort-popup-close{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
  }
}
.shop_list_wrap_box {
  position: relative;
  z-index: 9;
  padding: 0 20rpx;
  .shop_item_bg{
    height: 676rpx;
    position: absolute;
    top: 0;left: 20rpx;right: 20rpx;
    background: linear-gradient( 181deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
    border-radius: 32rpx 32rpx 0rpx 0rpx;
  }
  /* 官返-分类导航menu */
  .takeOut_menu{
    // height: 90rpx;
    // border-radius: 32rpx 32rpx 0 0;
    // overflow: hidden;
    margin-bottom: 20rpx;
  }
}

.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  height: calc(100vh);
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding-top: 100rpx;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
      .loading_gif {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }

}

.tag {
  margin-top: 8rpx;
  font-size: 24rpx;
}






.shop_list_wrap_height {
  width: 100%;
  position: relative;
  z-index: 4;
}

.noData_box {
  margin-top: 0;
  padding-bottom: 260rpx;
  text-align: center;
  color: #999;
  .noData_box .noData_box_img {
    width: 240rpx;
    height: 240rpx;
  }
}



.timeOut {
  font-size: 12px;
  color: #666;
  margin: 0px 0px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeOut view:nth-child(2) {
  color: #00acfd;
  padding-left: 10rpx;
}

.lijipay {
  width: 30%;
  position: relative;
  margin: 0 auto;
}

.tologon_btn {
  border-radius: 200rpx;
  color: #fff;
  height: 70rpx !important;
  line-height: 70rpx !important;
  background-image: linear-gradient(to left, #FF971E, #FF971E) !important;
}

.address_error_wrap {
  .address_error_title {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
    text-align: center;
    padding: 30rpx 0;
  }

  .address_error_info {
    background-color: #f7f7f7;
    text-align: center;
    padding-bottom: 60rpx;
    padding-top: 60rpx;
  }

  .address_error_info image {
    width: 376rpx;
    height: 246rpx;
    margin-bottom: 58rpx;
  }

  .infot_title {
    color: #333;
    width: 388rpx;
    margin: 0 auto 29rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

}

//  客服css
.server_box {
  position: fixed;
  right: 10rpx;
  bottom: 26%;
  z-index: 100;
  border-radius: 50%;

  .icon {
    width: 38rpx;
    height: 38rpx;
  }

  .text {
    font-size: 20rpx;
    color: #333;
  }
}
//帮助css
.help {
  min-height: 70rpx;
  min-width: 70rpx;
  background-color: #fdfdfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  border-radius: 100rpx;
}
/* 返回顶部 */
.scrollToTop{
  min-height: 70rpx;
  min-width: 70rpx;
  background-color: #fdfdfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  border-radius: 100rpx;
}
//微信小程序提示
.topTip {
  position: fixed;
  right: 68rpx;
  z-index: 999;

  .icons {
    display: flex;
    justify-content: flex-end;
    margin-right: 56rpx;
  }
  .tipAdd {
    border-radius: 10rpx;
    background-color: #000000;
    color: white;
    text-align: center;
    font-size: 26rpx;
    padding: 10rpx 20rpx;
    display: flex;
  }
}
/* 下单前必看弹窗css */
.rule_wrap{
  height: 100%;
  padding: 30rpx;
  position: relative;
  .rule_title{
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    color: #3D3D3D;
    background: #FFFFFF;
    box-shadow: 0 0 15rpx rgba(0,0,0,.1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .rule_content{
    height: 100%;
    // overflow: hidden;
    margin-top: 20rpx;
    overflow-y: auto;
    .rule_scroll{
      font-size: 28rpx;
      color: #666666;
      text-indent: 56rpx;
      line-height: 50rpx;

    }
  }
}

/* 免费报名弹窗 */
.sign_up_box{
  padding: 20rpx;
  .sign_warp{
    display: flex;
    .challenge_item_img{
      width: 108rpx;
      height: 120rpx;
      position: relative;
      .challenge_item_img_text{
        width: 100%;
        height: 72rpx;
        line-height: 72rpx;
        position: absolute;
        top: 0;
        color: #FA642B;
        text-align: center;
      }
    }
    .challenge_item_content{
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .challenge_item_content_title{
        margin-left: 10rpx;
        .challenge_item_content_title_text{
          font-size: 28rpx;
          color: #222222;
          font-weight: bold;
          line-height: 40rpx;
          margin-bottom: 10rpx;
        }
        .challenge_item_content_title_msg{
          font-size: 26rpx;
          color: #888888;
        }
      }
    }
  }
  .sign_content{
    padding-bottom: 210rpx;
    .sign_content_warp{
      .sign_content_title{
        font-size: 32rpx;
        line-height: 80rpx;
      }
      .sign_content_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #666666;
        line-height: 50rpx;
      }
    }
  }
  .sign_up_box_btn{
    height: 210rpx;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10;
    background: #FFFFFF;
    box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
    padding-left: 20rpx;
    padding-right: 20rpx;
    .sign_up_box_rule{
      display: flex;
      align-items: center;
      text-align: center;
      height: 80rpx;

      font-size: 24rpx;
      .check_icon {
        width: 34rpx;
        height: 34rpx;
        position: relative;
        margin-right: 7rpx;
      }
      .sign_up_box_rule_text{
        line-height: 80rpx;
        color: #666666;
        margin-left: 10rpx;
      }
    }
    .sign_up_box_text{
      width: 100%;
      height: 68rpx;
      line-height: 68rpx;
      color: #FFFFFF;
      text-align: center;
      font-size: 28rpx;
      border-radius: 50rpx;
      background: linear-gradient( 180deg, #FE7F08 0%, #FD3F03 100%);
    }
  }
}
/* banner放大二维码弹窗css */
.banner_qr_box{
  padding: 30rpx;
  .banner_qr_title{
    font-size: 32rpx;
    color: #333333;
    line-height: 80rpx;
    text-align: center;
  }
  .banner_qr_content{
    display: flex;
    justify-content: center;
  }
}
</style>